import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { add, minus, fetchUserById } from "../app/counterSlice";

export default function About() {
  const { count, imgUrl } = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>About</h1>
      <h1>使用react-redux和@reduxjs/toolkit</h1>
      <p>count: {count}</p>
      <button onClick={() => dispatch(add(1))}>+</button>
      <button onClick={() => dispatch(minus(1))}>-</button>
      <button onClick={() => dispatch(fetchUserById())}>
        点我获取随机图片
      </button>
      {imgUrl.map((item) => {
        return <img style={{ width: 100 }} src={item} alt="" />;
      })}
    </div>
  );
}
